.background{
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:linear-gradient(128deg, rgba(0,0,255,.8), rgba(0,0,255,.3) 70.71%),
  linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);;
}
.background .rotate{
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 200px);
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
  animation: rotate 20s linear infinite;
  zoom: 2;
}
@keyframes rotate {
  0%{
    transform: rotateX(0deg)rotateY(0deg);
  }
  100%{
    transform: rotateX(360deg)rotateY(360deg);
  }
}
.background .rotate .sphere{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.background .rotate .sphere:nth-child(2)
{
  transform: rotateY(90deg);
}
.background .rotate .sphere:nth-child(3)
{
  transform: rotateY(45deg);
}
.background .rotate .sphere:nth-child(4)
{
  transform: rotateY(-45deg);
}
.background .rotate .sphere span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  background: radial-gradient(blueviolet,dodgerblue);
  border-radius: 50%;
}
.background .rotate .sphere span:nth-child(1)
{
  transform: rotateX(0deg);
}
.background .rotate .sphere span:nth-child(2)
{
  transform: rotateX(30deg);
}
.background .rotate .sphere span:nth-child(3)
{
  transform: rotateX(60deg);
}
.background .rotate .sphere span:nth-child(4)
{
  transform: rotateX(90deg);
}
.background.rotate.sphere span:nth-child(5)
{
  transform: rotateX(120deg);
}
.background .rotate .sphere span:nth-child(6)
{
  transform: rotateX(150deg);
}
.background .b{
  position: fixed;
  margin: auto;
  width: 100%;
  overflow: hidden;
  height: 100%;
}
.background .b .c{
  width: 100%;
  list-style: none;
}
.background .b .c h1{
  float:left;
  color: blueviolet;
  width: 200%;
  text-align: right;
  animation-name: move;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.background .b .c h2{
  float:left;
  color: blueviolet;
  width: 200%;
  text-align: right;
  animation-name: move;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.background .b .c h3{
  float:left;
  color: blueviolet;
  width: 200%;
  text-align: right;
  animation-name: move;
  animation-duration: 11s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes move {
  0%
  {
    transform:translateX(0px);
  }
  100%
  {
    transform:translateX(-100%);
  }
}
